<script setup lang="ts">
import {onMounted,onUnmounted, ref} from 'vue'
import ItemWrap from "@/components/item-wrap";
import {apiGetNew} from "@/api";
import Loading from '@/components/loading/index.vue'
import LeftTop from "@/views/index/left-top.vue";
import LeftBottom from "@/views/index/left-bottom.vue";
import RightTop from "@/views/index/right-top.vue";
import RightBottom from "@/views/index/right-bottom.vue";
import CenterC from "@/views/index/center-c.vue";

const isLoading = ref(false)

const timer = ref()

const data = ref<any>({})
const getData =  async () => {
  const res = await apiGetNew()
  data.value = res.data.data
  if(localStorage.getItem('ctime') != data.value.ctime){
    isLoading.value = true
    let timer = setTimeout( async ()=>{
      isLoading.value = false
      clearTimeout(timer)
    },4000)
  }
  localStorage.setItem('ctime', data.value.ctime)
}

onMounted(()=>{
  if(timer.value) clearInterval(timer.value)
  let num = 0
  timer.value = setInterval(()=>{
    ++num;
    getData()
  },1000 * 5)
})
getData()
onUnmounted(()=>{
  if(timer.value) clearInterval(timer.value)
})
</script>

<template>
  <div>
    <div class="index-box mt-[93px] pl-[9px] pr-[9px] overflow-hidden">
      <div class="contetn_left">
        <ItemWrap :background-image="1" class="contetn_left-top w-[546px] h-[474px]" title="人体成分">
          <LeftTop :data="data"/>
<!--          <weather :data="weatherData"/>-->
        </ItemWrap>
        <ItemWrap :background-image="2"
                  class="w-[546px] h-[534px] mt-[-22px]"
                  title="其他分析"
        >
          <LeftBottom :data="data"/>
        </ItemWrap>
      </div>
      <div class="contetn_center relative">
        <img class="w-[856px] h-[1080px] absolute top-[-96px] z-[2]" src="@/assets/img/rt/1.png">
        <center-c :data="data"/>
      </div>
      <div class="contetn_right">
        <ItemWrap :background-image="4" class="h-[474px] w-[546px]" title="基础信息">
          <RightTop :data="data"/>
        </ItemWrap>
        <ItemWrap :background-image="5" class="h-[534px] w-[546px] mt-[-30px]" title="基本评估">
          <RightBottom :data="data"/>
        </ItemWrap>
      </div>
    </div>
    <Transition name="slide-fade">
      <loading v-if="isLoading"/>
    </Transition>
  </div>
</template>

<style scoped lang="scss">
.index-box {
  width: 100%;
  display: flex;
  //min-height: calc(100% - 93px);
  justify-content: space-between;
}
//左边 右边 结构一样
.contetn_left,
.contetn_right {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  position: relative;
  width: 546px;
  box-sizing: border-box;
  flex-shrink: 0;
}
.contetn_center {
  flex: 1;
  //margin: 0 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.contetn_lr-item {
  height: 310px;
}

/*
  进入和离开动画可以使用不同
  持续时间和速度曲线。
*/
.slide-fade-enter-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  //transform: translateX(20px);
  opacity: 0;
}
</style>
